[HTML5] 캔버스 영역을 자바스크립트를 사용하여 base64로 저장하기

HTML5의 캔버스(Canvas) 태그를 이미지로 만들어 저장하는 방법에 대하여 알아봅니다.

# HTML5 캔버스(Canvas) 태그 이미지 및 파일로 저장하는 방법

캔버스 태그를 사용하면 캔버스에 그려진 내용을 이미지나 파일로 저장할 수 있습니다. 이는 캔버스 API의 가장 강력한 기능 중 하나입니다. 이때 저장 방법은 아래와 이미지 파일과 base64 중 선택할 수 있습니다.

• 1. Base64로 변환하여 사용하기
• 2. 파일로 변환하여 저장하기
  

현재 보여지는 웹페이지 내부에서만 사용하거나 데이터베이스에 저장하는 용도라면 Base64로 변환하여 사용하는 방법이 좋겠죠. 만약 파일로 변환이 필요하다면 추가적으로 파일 위치 및 파일명 등을 사용해야 합니다. 그럼 하나씩 알아봅니다. 먼저 base64로 변환하는 방법입니다.

! 캔버스 이미지를 base64로 변환하기

가장 간단한 방법입니다. 캔버스 API는 toDataURL() 이라는 메서드를 제공합니다.

canvas.toDataURL(이미지포맷, 퀄리티);


이 방법을 사용하면 캔버스 영역을 base64값으로 즉시 반환합니다. 이 값을 변수에 담아 사용하면 되겠죠.

이제 canvasValue라는 변수는 아래와 같은 base64 값을 가지게 되었습니다.

출력될 값은 매우 깁니다~ 이미지를 base64 타입의 문자열로 변환했기 때문에 굉장히 길죠 ~ 이 변수를 img 태그에 사용해 보여줄 수도 있고 아니면 데이터베이스에 파일 대신 저장하는 것도 가능하죠!

! base64 저장시 파일의 퀄리티(Quality) 조절하기

만약 캔버스를 base64로 변환 후 저장할 때 화질, 퀄리티를 조절하고 싶다면? 이때는  toDataURL() 내부에 타입과 퀄리티를 설정할 수 있습니다.

이때 두 번째 설정값 화질(퀄리티)은 0 ~ 1 사이의 값으로 설정합니다. 1은 최대 퀄리티이고 0은 최저 퀄리티로 설정하게 되겠죠. 간단한 예제를 보면 아래와 같습니다.

이제 각각 다른 퀄리티의 이미지가 base64 값으로 변환하여 반환하게 됩니다.